<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
  <title>CSS Diagrams</title>

  <!-- N.B. The Content-Style-Type header is required when using inline style
       specifications. -->
  <meta http-equiv="Content-Type"       content="text/html; charset=iso-8859-1">
  <meta http-equiv="Content-Language"   content="en">
  <meta http-equiv="Content-Style-Type" content="text/css">

  <meta name="author" content="Tommy 'TOOLman' Olsson">

  <!-- Style Sheet -->
  <style type="text/css">
    html {
      margin:     0;
      padding:    0;
      background: #fff;
      color:      #000;
    }

    body {
      margin:     0;
      padding:    1em;
      background: #fff;
      color:      #000;
      /* The next declaration is important for IE5.x/Win.  You don't have to
         use 100%, but you must specify something. */
      font-size:  100%;
    }

    address {
      margin:           0.5em 0 1em;
      background-color: transparent;
      color:            #c00;
      font-size:        1.5em;
      font-style:       normal;
      font-weight:      bold;
      text-align:       center;
    }

    h1 { text-align: center }

    h1 span {
      display:   block;
      font-size: 80%;
    }

    h2 {
      max-width:     20em;
      margin:        2em auto 0.25em;
      font-size:     1.5em;
    }

    /* This will be wasted for IE5.x/Win. */
    p, pre, ul {
      margin-right: auto;
      margin-left:  auto;
    }

    /* This will not benefit IE6/Win users either. */
    p, ul { max-width: 30em }

    p code {
      background-color: transparent;
      color:            #960;
    }

    p samp {
      background-color: transparent;
      color:            #c00;
    }

    pre {
      width:     30em;
      max-width: 100%;
      padding:   0.5em 1em;
      overflow:  auto;
      border:    1px solid #666;
      color:     #000;
    }
    pre.pre-css  { background-color: #ffc }
    pre.pre-html { background-color: #cff }

    /* We'll sacrifice some accessibility for IE users, where max-width doesn't
       work. */
    * html h2 { width: 20em }
    * html p, * html ul { width: 30em }

    /* IE/Win won't get this, either. */
    h2+p { margin-top: 0.5em }

    .err { text-decoration: line-through }

    /* Some Opera-friendly stuff for the email address. */
    .at { content: "@" }
    .dot { content: "." }


    /*
     * ==================================
     * THE INTERESTING STUFF STARTS HERE!
     * ==================================
     */

    /* The main diagram container needs to be positioned relatively, so that
       it's children can be positioned within it. */
    #diagram {
      position: relative;
      margin:   0 auto; /* Sorry, IE5.x/Win. */
      width:    35em;
      height:   24em;
    }

    /* Turn off this Opera/Mozilla feature. */
    #diagram abbr, #diagram acronym { border-bottom: 0 }

    /* The top-level DIVs are the state boxes, which should have a border.
       We need to use ems, because the border width counts in the box size
       (except in IE5.x/Win, of course).  It will affect arrow lengths. */
    #diagram div {
      border: 0.05em solid #000;
    }

    /* All DIVs and list items in the diagram are absolutely positioned. */
    #diagram div, #diagram li {
      position: absolute;
      margin:   0;
      padding:  0;
    }

    /* State names will be centered within their boxes. */
    #diagram h3 {
      margin:      0;
      padding:     0;
      font-size:   1em;
      font-weight: normal;
      line-height: 2;
      text-align:  center;
    }

    /* The "current" state needs to stand out. */
    #current {
      background-color: #33c;
      color:            #fff;
    }
    #current h3 { font-weight: bold }

    /* "Linked" states are indicated visually as state boxes. */
    #diagram div li a {
      display:          block;
      position:         absolute;
      border:           0.05em dotted #666;
      background-color: #eee;
      line-height:      2;
      text-align:       center;
    }
    #diagram div li a:link    { color: #00f }
    #diagram div li a:visited { color: #906 }
    #diagram div li a:hover, #diagram div li a:focus { color: #f60 }
    #diagram div li a:active  { color: #f00 }

    /* SAMPs are samples of the symbols causing a transition. */
    #diagram li samp {
      background-color: transparent;
      color:            #069;
    }

    /* VARs in SAMPs indicate a symbol _type_. */
    #diagram li samp var {
      background-color: transparent;
      color:            #930;
      font-style:       normal;
    }

    /* SPANs are used for hiding explanatory text that shouldn't be used in a
       CSS-aware environment.  Those SPANs are also used for creating the
       arrowheads on transition lines (see below). */
    #diagram li span {
      position:    absolute;
      width:       0;
      height:      0;
      overflow:    hidden;
    }

    /* IE5.x/Win is somewhat buggy.  Yes, really! */
    * html #diagram li span {
      font-size:  0;
      f\ont-size: 1em;
    }

    * html #diagram .circ-top span,
    * html #diagram .down span,
    * html #diagram .up span
    {
      width:   8px;
      w\idth:  0;
      height:  4px;
      he\ight: 0;
    }

    * html #diagram .circ-right span,
    * html #diagram .right span,
    * html #diagram .down-right span,
    * html #diagram .up-right span
    {
      width:   4px;
      w\idth:  0;
      height:  8px;
      he\ight: 0;
    }

    /* We'll use unordered lists for the transitions. */
    #diagram ul {
      margin:     0;
      padding:    0;
      list-style: none inside;
    }

    /* IE6/Win completely freaks out without this. */
    * html #diagram ul { width: 0 }

    /* Transition lines. */
    #diagram .circ-right { /* Circular transition to the right of a state box. */
      top:         0.5em;
      left:        100%;
      width:       1em;
      margin-left: 0.05em;
      height:      1em;
      border:      0.05em solid #000;
      border-left: 0;
    }
    #diagram .circ-right samp {
      position: absolute;
      left:     100%;
    }

    #diagram .circ-top { /* Circular transition above a state box. */
      bottom:        100%;
      left:          0.5em;
      width:         1em;
      height:        1em;
      margin-bottom: 0.05em;
      border:        0.05em solid #000;
      border-bottom: 0;
    }
    #diagram .circ-top samp {
      position:  absolute;
      bottom:    100%;
    }

    #diagram .down { /* Straight vertical transition, top to bottom. */
      top:         100%;
      left:        50%;
      margin-top:  0.05em;
      border-left: 0.05em solid #000;
    }
    #diagram .down a {
      top:  100%;
      left: 0;
    }

    #diagram .down-right { /* Angled transition, down and right. */
      top:           100%;
      left:          100%;
      margin-bottom: 0.05em;
      margin-left:   -1em;
      border-bottom: 0.05em solid #000;
      border-left:   0.05em solid #000;
    }
    #diagram .down-right a {
      bottom: -1em;
      left:   100%;
    }

    #diagram .right { /* Straight horizontal transition, left to right. */
      top:           0;
      left:          100%;
      margin-left:   0.05em;
      border-bottom: 0.05em solid #000;
    }
    #diagram .right a {
      top:  0;
      left: 100%;
    }

    #diagram .up { /* Straight vertical transition, bottom to top. */
      bottom:        100%;
      left:          50%;
      margin-bottom: 0.05em;
      border-left:   0.05em solid #000;
    }
    #diagram .up samp, #diagram .up-right samp {
      position: absolute;
      bottom:   0;
    }

    #diagram .up-right { /* Angled transition, up and right. */
      bottom:        100%;
      left:          100%;
      margin-bottom: 0.05em;
      margin-left:   -1em;
      border-top:    0.05em solid #000;
      border-left:   0.05em solid #000;
    }
    #diagram .up-right a {
      top:  -1em;
      left: 100%;
    }

    /* Arrowheads */
    #diagram .circ-right span {
      top:           -0.3em;
      left:          0;
      border-top:    0.3em solid #fff;
      border-right:  0.5em solid #000;
      border-bottom: 0.3em solid #fff;
    }
    * html #diagram .circ-right span {
      top:           -4px;
      t\op:          -0.3em;
      border-width:  4px 4px 4px 0;
      b\order-width: 0.3em 0.5em 0.3em 0;
    }

    #diagram .circ-top span, #diagram .down span {
      bottom:       0;
      left:         -0.3em;
      border-top:    0.5em solid #000;
      border-right:  0.3em solid #fff;
      border-left:   0.3em solid #fff;
    }
    * html #diagram .circ-top span, * html #diagram .down span {
      left:          -4px;
      lef\t:         -0.3em;
      border-width:  4px 4px 0;
      b\order-width: 0.5em 0.3em 0;
    }

    #diagram .down-right span, #diagram .right span {
      right:         0;
      bottom:        -0.3em;
      border-top:    0.3em solid #fff;
      border-bottom: 0.3em solid #fff;
      border-left:   0.5em solid #000;
    }
    * html #diagram .down-right span, * html #diagram .right span {
      bottom:        -4px;
      b\ottom:       -0.3em;
      border-width:  4px 0 4px 4px;
      b\order-width: 0.3em 0 0.3em 0.5em;
    }

    #diagram .up span {
      top:           0;
      left:          -0.3em;
      border-right:  0.3em solid #fff;
      border-bottom: 0.5em solid #000;
      border-left:   0.3em solid #fff;
    }
    * html #diagram .up span {
      left:          -4px;
      lef\t:         -0.3em;
      border-width:  0 4px 4px 4px;
      b\order-width: 0 0.3em 0.5em 0.3em;
    }

    #diagram .up-right span {
      top:           -0.3em;
      right:         0;
      border-top:    0.3em solid #fff;
      border-bottom: 0.3em solid #fff;
      border-left:   0.5em solid #000;
    }
    * html #diagram .up-right span {
      top:           -4px;
      t\op:          -0.3em;
      border-width:  4px 0 4px 4px;
      b\order-width: 0.3em 0 0.3em 0.5em;
    }

    /* Rows, columns, heights, widths, and sizes. */
    .row1 { top: 3em }
    .row2 { top: 9em }
    .row3 { top: 15em }

    .col1 { left: 3em }
    .col2 { left: 11em }
    .col3 { left: 12em }

    .size1 { width: 4em }
    .size2 { width: 8em }

    .size3  { width: 10em }
    a.size3 { margin-left: -5em }

    .size4 {
      width:  6.95em;
      height: 1.95em;
    }

    .size5 {
      width:  5.95em;
      height: 1.95em;
    }

    .height1 { height: 3.9em }

    .width1 { width: 4.9em }
    .width2 { width: 5.9em }
  </style>
</head>
<body>
  <h2>State Diagram</h2>
  <div id="diagram">
    <!-- Initial state. -->
    <div id="current" class="row2 col1 size1">
      <h3>Start</h3>

      <ul>
        <li class="circ-top"><samp><var>&lt;space&gt;</var></samp><span> is
          ignored</span></li>
        <li class="down height1"><samp>*</samp><span> (any character) causes a
          transition to the <abbr title="HyperText Markup Language">HTML</abbr>
          state.</span></li>
        <li class="right width1"><samp>&lt;</samp><span> leads to the
          OpenRootTag state.</span></li>

      </ul>
    </div>

    <!-- HTML state. -->
    <div class="row3 col1 size1">
      <h3><abbr title="HyperText Markup Language">HTML</abbr></h3>
      <ul>
        <li class="circ-right"><samp>*</samp><span> (any character) is
          allowed.</span></li>

        <li class="down height1"><samp>&lt;</samp><span> causes a transition to
          the </span><a href="#" class="size3">OpenContentTag</a>
          <span>state.</span></li>
      </ul>
    </div>

    <!-- OpenRootTag state. -->
    <div class="row2 col3 size2">

      <h3>OpenRootTag</h3>
      <ul>
        <li class="up height1"><samp>!</samp><span> causes a transition to the
          OpenRootDirective state</span></li>
        <li class="right width2"><samp>?</samp><span> causes a transition to
          the </span><a href="#" class="size2">OpenPI</a>
          <span>state.</span></li>

        <li class="down-right size4"><samp><var>&lt;id&gt;</var></samp><span>
          causes a transition to the
          </span><a href="#" class="size2">StartTag</a>
          <span>state.</span></li>
      </ul>
    </div>

    <!-- OpenRootDirective state. -->

    <div class="row1 col2 size3">
      <h3>OpenRootDirective</h3>
      <ul>
        <li class="up-right size5"><samp>-</samp><span> causes a transition to
          the </span><a href="#" class="size2">OpenComment1</a>
          <span>state.</span></li>
        <li class="right width1"><samp>DOCTYPE</samp><span> causes a transition
          to the </span><a href="#" class="size2">OpenDocType</a>

          <span>state.</span></li>
        <li class="down-right size5"><samp>[</samp><span> causes a transition to
          the </span><a href="#" class="size2">OpenCDATA1</a>
          <span>state.</span></li>
      </ul>
    </div>
  </div> <!-- #diagram -->



</body>
</html>
